<template>
  <el-cord class="card">
    <el-row class="buttonBar">
      <span>运行状态：</span>
      <el-tag size="large" v-if="runStatus" type="success" style="margin-right: 20px">运行中</el-tag>
      <el-tag size="large" type="danger" v-else style="margin-right: 20px">已停止</el-tag>
      <el-button type="success" @click="startApps" v-loading="loadStart" :disabled="runStatus">开启</el-button>
      <el-button type="danger" @click="stopApps"  v-loading="loadStop" :disabled="!runStatus"> 停止</el-button>
      <el-button type="primary" @click="restartApps" v-loading="loadRestart">重启</el-button>
      <el-tooltip content="点击刷新运行详情" effect="light" placement="top">
      <el-button type="warning" @click="switchTable('status')"
        >运行详情</el-button
      >
      </el-tooltip>
      <el-tooltip content="点击刷新日志" effect="light" placement="top">
        <el-button type="info" @click="switchTable('log')">日志</el-button>
      </el-tooltip>
    </el-row>
    <el-row style="">
      <el-tag class="title-tag" shadow="hover">
        <h2 class="title-text">{{ tableTitle }}</h2>
      </el-tag>
      <el-table
        :data="paginatedLog"
        style="width: 100%; height: 50vh; min-height: 450px"
        v-if="isLog"
      >
        <el-table-column type="index" label="id" width="50" align="center">
          <template #default="scope">
            <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
          </template> </el-table-column
        >/>
        <el-table-column prop="time" label="时间" width="180" />
        <el-table-column prop="log" label="日志" />
      </el-table>

      <el-table
        :data="paginatedStatus"
        style="width: 100%; height: 50vh; min-height: 450px"
        v-else
      >
        <el-table-column type="index" label="id" width="50" align="center">
          <template #default="scope">
            <span>{{ (currentPage - 1) * pageSize + scope.$index + 1 }}</span>
          </template> </el-table-column
        >/>
        <el-table-column prop="imageName" label="映像名称" width="180" />
        <el-table-column prop="PID" label="PID" />
        <el-table-column prop="sessionName" label="会话名" />
        <el-table-column prop="sessionId" label="会话编码" />
        <el-table-column prop="memoryUsage" label="内存使用" />
      </el-table>

      <pagination
        v-show="total > 0"
        :total="total"
        v-model:page="currentPage"
        v-model:limit="pageSize"
        @pagination=""
      />
    </el-row>
  </el-cord>
</template>
<script setup>
import { onMounted, ref, computed } from "vue";
import { getAppLog, getAppStatus,startApp,stopApp } from "@/api/user.js";
import { ElMessage } from "element-plus";
const tableData = ref([]);
const currentPage = ref(1);
const pageSize = ref(10);
const total = ref(0);
const paginatedLog = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return tableData.value.slice(start, start + pageSize.value);
});
const tableDataStatus = ref([]);
const paginatedStatus = computed(() => {
  const start = (currentPage.value - 1) * pageSize.value;
  return tableDataStatus.value.slice(start, start + pageSize.value);
});
const isLog = ref(false);
// const appName = ref("鼎折覆餗");
const tableTitle = computed(() => {
  if (isLog.value) return appName + "-日志";
  else return appName + "-运行详情";
});

const porps = defineProps({
  send_data: {
    type: Array, // 对象类型
    default() {
      return [{}]; //默认值
    },
  },
})
const { appName, appPath, app, appLog } = porps.send_data[0]
// console.log(97,appName, appPath, app, appLog)
// 获取APP日志
const getAppLogs = async () => {
  let res = await getAppLog(appLog);
  console.log(39, res);
  if (res.data.code == 200) {
    tableData.value = res.data.data.reverse();
    total.value = tableData.value.length;
  }
  console.log(41, tableData.value);
};
const runStatus = ref(false)
// 获取APP运行详情
const getAppSta = async () => {
  let res = await getAppStatus(app);
  console.log(57, res);
  if (res.data.code == 200) {
    runStatus.value = true
    tableDataStatus.value = res.data.data.reverse();
    total.value = tableDataStatus.value.length;
  } else {
    runStatus.value = false
    tableDataStatus.value = [];
    total.value = 0;
  }
  console.log(62, tableDataStatus.value);
};
const loadStart = ref(false)
// 开启程序
const startApps = async () => {
  loadStart.value = true
  let res = await startApp(appPath)
  if (res.data.code == 300) {
    loadStart.value = false
    return ElMessage.error(res.data.msg)
  }
  setTimeout(() => {
    loadStart.value = false
    ElMessage.success(res.data.msg)
    getAppSta()
  },3*1000)
}
const loadStop = ref(false)
// 停止程序
const stopApps = async () => {
  loadStop.value = true
  let res = await stopApp(appPath)
  if (res.data.code == 300) {
    loadStop.value = false
    return ElMessage.error(res.data.msg)
  }
  setTimeout(() => {
    loadStop.value = false
    ElMessage.success(res.data.msg)
    getAppSta()
  },3*1000)
}
const loadRestart = ref(false)
// 停止程序
const restartApps = async () => {
  loadRestart.value = true
  let res1 = await stopApp(appPath)
  setTimeout(async() => {
    let res2 = await startApp(appPath)
    setTimeout(() => {
      loadRestart.value = false
      if (res2.data.code == 200) ElMessage.success('程序重启成功')
      else ElMessage.error('程序重启失败')
      getAppSta()
    },3*1000)
    
  },2*1000)
}
// APP日志和运行详情表格切换
const switchTable = (key) => {
  console.log(68, key);
  currentPage.value = 1;
  switch (key) {
    case "status":
      getAppSta();
      isLog.value = false;
      break;
    case "log":
      getAppLogs();
      isLog.value = true;
      break;
  }
};
onMounted(() => {
  getAppLogs();
  getAppSta();
  console.log(95,porps.send_data)
});
</script>
<style scoped>
.buttonBar el-button {
  margin: 0 20px;
}
.title-tag {
  width: 100%;
  margin: 10px auto;
  text-align: center;
  padding: 20px;
}

.title-text {
  font-size: 24px;
  font-weight: bold;
  color: #409eff;
}
</style>
